<template>
	<view class="container">
		<view class="order_top">
			<view class="order_img">
				<image src="/static/image/order.png" mode=""></image>
				<view class="">{{ statusText }}</view>
			</view>
		</view> 
		<view class="order_contact">
			<view class="contact_item">
				<view class="icon">
					<u-icon name="map" size="34rpx"></u-icon>
				</view>
				<view class="item_right">
					<view class="contact">
						<text>{{order.address.contact_name}}</text>
						<text style="margin-left: 20rpx">{{order.address.contact_phone}}</text>
					</view>
					<view class="addr">
						{{order.address.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="order_contact">
			<view class="goods">
				<view class="center" v-for="(item,index) in order.items" :key="index">
					<view class="goods_img">
						<image :src="'https://images.weserv.nl/?url=' + item.product.image[0]"  mode=""></image>
					</view>
					<view class="goods_info">
						<view>
							{{ item.product.title }}
						</view>
						<view class="price_num">
							<view class="price">￥{{ item.product.price }}</view>
							<view class="num">x{{ item.amount }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods">
				<u-row customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>订单编号:</view>
					</u-col>
					<u-col span="7">
						<view>{{ order.no }}</view>
					</u-col>
					<u-col span="2">
						<view>
							<u-button
								size="mini"
								shape="circle"
								:custom-style="btnStyle"
								@tap="getDetail(order.no)"
							>
								复制
							</u-button>
						</view>
					</u-col>
				</u-row>
				<u-row v-if="!order.closed" customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>订单交易号:</view>
					</u-col>
					<u-col span="9">
						<view>{{ order.payment_no }}</view>
					</u-col>
				</u-row>
				<u-row v-if="order.paid_at != null && order.ship_status != 'pending'" customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>物流名称:</view>
					</u-col>
					<u-col span="9">
						<view>{{ order.ship_data.express_company }}</view>
					</u-col>
				</u-row>
				<u-row v-if="order.paid_at != null && order.ship_status != 'pending'" customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>物流单号:</view>
					</u-col>
					<u-col span="7">
						<view>{{ order.ship_data.express_no }}</view>
					</u-col>
					<u-col span="2">
						<view>
							<u-button
								size="mini"
								shape="circle"
								:custom-style="btnStyle"
								@tap="getDetail(order.ship_data.express_no)"
							>
								复制
							</u-button>
						</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>创建时间:</view>
					</u-col>
					<u-col span="9">
						<view>{{ order.created_at }}</view>
					</u-col>
				</u-row>
			</view>
			<view class="goods">
				<u-row customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>商品金额</view>
					</u-col>
					<u-col span="9">
						<view style="text-align: right; font-weight: bold;">￥{{ order.total_amount }}</view>
					</u-col>
					
				</u-row>
				<u-row customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						<view>运费</view>
					</u-col>
					<u-col span="9">
						<view style="text-align: right; font-weight: bold;color: #1786f8">￥0</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10rpx">
					<u-col span="3">
						
					</u-col>
					<u-col span="9">
						<view style="text-align: right; font-weight: bold;">实付金额：<text style="color: #1786f8;">￥{{ order.total_amount }}</text>   </view>
					</u-col>
				</u-row>
			</view> 
			<view class="goods" v-if="order.extra != null" style="padding-top: 20rpx;">
				<view>
					<view style="display: inline-block;">
						退款原因
					</view>
				</view>
				<view style="padding-top: 20rpx;">
					<p v-if="order.extra.refund_disagree_reason">{{order.extra.refund_disagree_reason}}</p>
					<p v-if="order.extra.refund_reason">{{order.extra.refund_reason}}</p>
				</view>  
			</view>
		<!-- 	<view class="goods" v-if="order.reviewed == true" style="padding-top: 0;">
				<view>
					<view style="display: inline-block;">
						我的评价
					</view>
					<view style="display: inline-block;padding: 30rpx 20rpx;">
						<l-starRate v-model="order.items[0].rating" :disabled="false"></l-starRate>
					</view>
				</view>
				<view style="">
					{{order.items[0].review}}
				</view>  
			</view> -->
			<view class="bot_btn">
				<view @click="sign" class="bot_botton" v-if="order.ship_status == 'delivered' && order.refund_status == 'pending'">
					签收
				</view>
				<view @click="refund" class="bot_botton" v-if="order.paid_at != null && (order.ship_status == 'pending' || order.ship_status == 'delivered') && order.refund_status == 'pending'">  
					退款
				</view>
				<!-- <view @click="appraisebtb" class="bot_botton" v-if="order.ship_status == 'received' && order.reviewed == false">
					评价
				</view> -->
				
			</view>
		</view>
		<u-popup
			:show="shareShow"
			:round="5"
			@close="shareShow = false"
			:safeAreaInsetBottom="false"
		>
			<view class="share_content">
				<view class="appraise_top">
					<view style="margin-right: 30rpx;">描述相符</view>
					 <l-starRate v-model="value" :disabled="false"></l-starRate>
				</view>
				<view style="width: 90%;margin: 20rpx auto;">
					<textarea v-model="shareappraise" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧" style="width: 100%;height: 200rpx;"></textarea>
				</view>
				<view @click="publishreview" class="appraise_top_btn">发布</view>
			</view>
		</u-popup>
		<!-- 退款 -->
		<u-popup
			:show="refundShow"
			:round="5"
			@close="refundShow = false"
			:safeAreaInsetBottom="false"
		>
			<view class="share_content" style="position: relative;">
				<view style="width: 90%;margin: 50rpx auto;">
					<textarea v-model="refundappraise"  placeholder="请输入退款原因" style="width: 80%;height: 200rpx;border:1rpx solid #9c9c9c;padding: 15rpx;margin: 0 auto;"></textarea>
				</view>
				<view @click="refundbtn" class="appraise_top_btn" style="position: absolute;bottom: 30rpx;left: 10%;">退款</view>
			</view>
		</u-popup>
	</view>
</template> 
 
<script>
import { orderDetail , received , postreview , refund } from '@/api/order.js'
export default {
	data() {
		return {
			btnStyle: {
				height: '32rpx'
			},
			order: {},
			shareShow:false,
			value:5,
			shareappraise:'',
			statusText:'',
			refundShow:false,
			refundappraise:''
			
		};
	},
	onLoad(options) {
		this.orderId = options.id
		this.getInfo()
	},
	methods: {
		getInfo(){
			orderDetail(this.orderId).then(res => {
				this.order = res.data
				// statusText
				if(this.order.closed == true){
					this.statusText = '已关闭'
				}else{
					if(this.order.paid_at == null){
						this.statusText = '待付款'
					}else{
						if(this.order.refund_status == 'applied'){
							this.statusText = '已申请退款'
						}else if(this.order.refund_status == 'processing'){
							this.statusText = '退款中'
						}else if(this.order.refund_status == 'success'){
							this.statusText = '退款成功'
						}else if(this.order.refund_status == 'failed'){
							this.statusText = '退款失败'
						}else if(this.order.refund_status == 'pending'){
							if(this.order.ship_status == 'pending'){
								this.statusText = '未发货'
							}else if(this.order.ship_status == 'delivered'){
								this.statusText = '已发货'
							}else if(this.order.ship_status == 'received'){
								this.statusText = '已收货'
								// if(this.order.reviewed == false){
								// 	this.statusText = '待评价'
								// }else{
								// 	this.statusText = '已评价'
								// }
							}
						}
					}
				} 
			})
		},
		// 评价抽屉
		appraisebtb(){
			this.shareShow = true
		},
		getDetail(info) {
			uni.setClipboardData({
				data: info, //要被复制的内容
				success: () => {
					//复制成功的回调函数
					uni.showToast({
						//提示
						icon:'none',
						title: '复制成功'
					});
				}
			});
			// uni.showModal({
			//     content: info,//模板中提示的内容
			//     confirmText:'复制内容',
			//     success:(res) => {//点击复制内容的后调函数
			// 		if(res.confirm) {
			// 			let result
			// 			// #ifndef H5
			// 			//uni.setClipboardData方法就是讲内容复制到粘贴板
			// 			uni.setClipboardData({
			// 				data: info,//要被复制的内容
			// 				success:() => {//复制成功的回调函数
			// 					uni.showToast({//提示
			// 						title:'复制成功'
			// 					})
			// 				}
			// 			});
			// 			// #endif

			// 			 // #ifdef H5
			// 				let textarea = document.createElement("textarea")
			// 				textarea.value = info
			// 				textarea.readOnly = "readOnly"
			// 				document.body.appendChild(textarea)
			// 				textarea.select() // 选中文本内容
			// 				textarea.setSelectionRange(0, info.length)
			// 				uni.showToast({//提示
			// 					title:'复制成功'
			// 				})
			// 				result = document.execCommand("copy")
			// 				textarea.remove()
			// 			// #endif
			// 		} else {
			// 			console.log('取消')
			// 		}
			//     }
			// });
		},
		// 订单签收
		sign(){
			received(this.order.id).then(res => {
				if(res.status == 200){
					uni.showToast({
						title:"签收成功"
					})
					this.getInfo()
				}
			})
		},
		// 退款
		refund(){
			this.refundShow = true
		},
		refundbtn(){
			if(this.refundappraise == ''){
				uni.showToast({
					title:"请输入退款原因",
					icon:'error',
					duration:2000
				})
			}else{
				refund({reason : this.refundappraise},this.orderId).then(res => {
					if(res.status == 200){
						this.refundShow = false
						uni.showToast({
							title:"退款申请已提交"
						})
						this.getInfo()
					}else{
						uni.showToast({
							title:"提交失败"
						})
					}
				})
			}
			
		},
		// 发布评价
		publishreview(){
			const review = []
			this.order.items.forEach(item => {
				review.push({
					id:item.id,
					rating:this.value,
					review:this.shareappraise
				})
			})
			postreview({'reviews':review},this.orderId).then(res => {
				if(res.status == 200){
					this.shareShow = false
					uni.showToast({
						title:"评价成功"
					})
					this.shareShow = false
					this.getInfo()
				}else{
					uni.showToast({
						title:"评价失败"
					})
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	.order_contact {
		padding: 0rpx 30rpx;

		.goods {
			border-radius: 10rpx;
			background-color: #fff;
			// height: 120rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			font-size: 27rpx;
			.center {
				font-size: 30rpx;
				display: flex;
				.goods_img {
					margin-right: 30rpx;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}
				.goods_info {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					flex: 1;
					.price_num {
						display: flex;
						justify-content: space-between;
						.price {
							font-weight: bold;
							color: #1786f8;
						}
						.num {
							color: #777;
						}
					}
				}
			}
		}
		.bot_btn{
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			.bot_botton{
				display: inline-block;
				width: 120rpx;
				height: 60rpx;
				font-size: 28rpx;
				background: #1786f8;
				color: #fff;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				font-weight: 550;
				margin-right: 20rpx;
			}
		}
		.contact_item {
			border-radius: 10rpx;
			background-color: #fff;
			height: 120rpx;
			margin-top: -100rpx;
			padding: 30rpx;
			// display: flex;
			position: relative;
			.icon {
				position: absolute;
				top: 35rpx;
			}
			.item_right {
				position: absolute;
				left: 80rpx;
			}
			.addr {
				padding-right: 60rpx;
			}
		}
	}
	.order_top {
		height: 280rpx;
		background-color: #1786f8;
		.order_img {
			padding: 50rpx 0 0 40rpx;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			// font-weight: bold;
			image {
				height: 110rpx;
				width: 110rpx;
				margin-right: 30rpx;
			}
		}
	}
}
.share_content{
	height: 500rpx;
	.appraise_top{
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 40rpx;
		display: flex;
	}
	.appraise_top_btn{
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #1786f8;
		color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
		text-align: center;
		z-index: 9999;
	}
}

</style>
